<template>
    <div>
        <el-col :span="24" class="action-bar">
            <el-button type="primary" size="medium" @click="reBack">返回</el-button>
            <el-button type="primary" size="medium" @click="dialogBanner=true">新增</el-button>
        </el-col>

        <el-table :data="tableData" highlight-current-row class="el-table-style">
			<el-table-column prop="id" label="ID" width="100" sortable/>
            <el-table-column prop="goods_name" label="商品名称" width="150" sortable/>
			<el-table-column prop="name" label="商品图片" width="150" sortable>
                <template slot-scope="scope">
                <div>
                    <img :src="scope.row.img_url" alt="" style="width:100px;height:100px;object-fit: contain;">
                </div>
                </template>
            </el-table-column>
            <el-table-column prop="sort" label="排序" width="150" sortable/>
            <el-table-column label="操作" width="250">
                <template slot-scope="scope">
                    <div>
                        <el-button type="primary" size="mini" @click="editorBanner(scope.row.id)">编辑</el-button>
                        <el-button type="danger" size="mini"  @click="deleteBanner(scope.row.id)">删除</el-button>
                    </div>
                </template>
			</el-table-column>
		</el-table>

        <el-dialog
            :visible.sync="dialogBanner"
            @close="initData"
            >
            <el-form :label-position="'left'" label-width="100px"  >
                <el-form-item label="上传" >
                    <el-upload
                        class="avatar-uploader"
                        action="https://bibiji.rzkeji.com/api/file/upload-img"
                        name="photo"
                        :show-file-list="false"
                        :on-success="handlePhoto"
                        :before-upload="beforeAvatarUpload">
                        <img v-if="photoImg" :src="photoImg" class="avatar">
                        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                        </el-upload>
                </el-form-item>
                <el-form-item label="排序" >
                    <el-input palceholder="图片排序" v-model="sortNum"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
				<el-button type="primary" @click="submit" >提交</el-button>
			</div>
        </el-dialog>
    </div>
</template>
<script>
export default {
    data(){
        return {
            tableData:[{a:1}],
            dialogBanner:false,
            sortNum:'',
            photoImg:'',//banner图片
            photoId:'',
            good_id:'',//商品id
            id:''//数据id
        }
    },
    methods: {
        reBack(){
            this.$router.replace('GoodsList')
        },
        beforeAvatarUpload(file) {
			//上传照片前的操作
			// console.log(file,555)
		},
		handlePhoto(res, file) {
			//上传头像成功
			if(res.data){
				this.photoImg=res.data.img_url;
				this.photoId=res.data.id;
			}
        },
        initData(){
            this.photoImg='';//banner图片
            this.photoId='';
            this.id='';
            this.sortNum='';
        },
        async submit(){
            let params={
                goods_id:this.good_id,
                img_id:this.photoId,
                sort:this.sortNum,
                id:this.id,
            }
            let res=await this.$api.setGoodsBanner(params);
            if(res.data.level=='success'){
                this.$message({
                    type:'success',
                    message:res.data.message
                })
                this.dialogBanner=false;
                this.goodsBannerList()
            }else{
                this.$message({
                    type:'error',
                    message:res.data.message
                })
            }
        },
        async goodsBannerList(){
            //获取列表
            let res=await this.$api.goodsBannerList({
                id:this.good_id
            })
            if(res.data.level=='success'){
                this.tableData=res.data.data
            }
        },
        async editorBanner(id){
            //获取banner详情
            this.id=id
            let params={
                id:this.id
            }
            let res=await this.$api.goodsBannerDetail(params);
            if(res.data.level=='success'){
                let data=res.data.data
                this.photoId=data.img_id;
                this.photoImg=data.img_url;
                this.sortNum=data['sort'];
                this.dialogBanner=true
            }else{
                this.$message({
                    type: 'error',
                    message: res.data.message
                });
            }
            
        },
        deleteBanner(id){
            //删除
            this.id=id;
            const judge= this.$confirm('删除该banner?', '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning'
				}).then(async() => {
                    let params={
                        id:this.id
                    }
					let res=await this.$api.delGoodsBanner(params)
					if(res.data.level=='success'){
						this.goodsBannerList()
						this.$message({
							type: 'success',
							message: res.data.message
						});
					}else{
						this.$message({
							type: 'error',
							message: res.data.message
						});
					}
					
				}).catch(() => {
          
			});
        },
    },
    mounted() {
        this.good_id=this.$route.query.id;
        this.goodsBannerList()
    },
}
</script>
<style lang="scss" scoped>
    .avatar-uploader-icon {
		font-size: 28px;
		color: #8c939d;
		width: 178px;
		height: 178px;
		line-height: 178px;
		text-align: center;
		border: 1px dashed #d9d9d9;
	}
	.avatar {
		width: 178px;
		height: 178px;
		display: block;
		object-fit: contain;
    }
    .dialog-footer{
        text-align: center
    }
</style>